<template>
  <div class="ele-body">
    <a-card :bordered="false" style="margin-bottom: 16px">
      <div class="flex align-center">
        <img
          width="100"
          src="@/assets/user_male.jpg"
          v-if="receipts_detail.info?.sex == '男'"
        />
        <img
          width="100"
          src="@/assets/user_female.jpg"
          v-if="receipts_detail.info?.sex == '女'"
        />
        <div class="flex1 margin-left-15">
          <div class="flex align-center">
            <span class="margin-right-5 fs-15"
              >{{ receipts_detail.info?.name }}({{
                receipts_detail.info?.nickname || ''
              }})</span
            >
            <man-outlined v-if="receipts_detail.info?.sex == '男'" />
            <woman-outlined v-if="receipts_detail.info?.sex == '女'" />
          </div>
          <div class="flex align-center margin-top-10">
            <span class="info-level">线下会员</span>
            <span class="info-level"
              >{{ receipts_detail.info?.level }}级
              {{ receipts_detail.info?.level_name || '' }}</span
            >
            <span class="info-level" v-if="receipts_detail.info?.user_name"
              >员工：{{ receipts_detail.info?.user_name || '' }}</span
            >
          </div>
          <div class="flex align-center margin-top-10 fs-15">
            <span class="margin-right-15"
              >卡号：{{ receipts_detail.info?.card_num || '' }}</span
            >
            <span>手机号：{{ receipts_detail.info?.mobile || '' }}</span>
          </div>
        </div>
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-space size="middle" class="analysis-tabs-extra">
        <a-radio-group v-model:value="checked" @change="toggleChange">
          <a-radio-button value="1">基本资料</a-radio-button>
          <a-radio-button value="2">进店记录</a-radio-button>
          <a-radio-button value="3">消费记录</a-radio-button>
          <a-radio-button value="4">退货记录</a-radio-button>
          <a-radio-button value="5">积分/礼金记录</a-radio-button>
        </a-radio-group>
      </a-space>
      <div class="margin-top-24">
        <table
          v-if="checked == 1"
          cellpadding="0"
          cellspacing="0"
          class="recepit_table2"
        >
          <tbody>
            <tr>
              <td class="tit">会员卡号</td>
              <td>{{ receipts_detail.info?.card_num || '' }}</td>
              <td class="tit">姓名</td>
              <td>{{ receipts_detail.info?.name || '' }}</td>
              <td class="tit">手机号</td>
              <td>{{ receipts_detail.info?.mobile || '' }}</td>
              <td class="tit">证件号</td>
              <td>{{ receipts_detail.id_num || '' }}</td>
            </tr>
            <tr>
              <td class="tit">昵称</td>
              <td>{{ receipts_detail.info?.nickname || '' }}</td>
              <td class="tit">性别</td>
              <td>{{ receipts_detail.info?.sex || '' }}</td>
              <td class="tit">会员等级</td>
              <td>{{ receipts_detail.info?.level }}</td>
              <td class="tit">地区</td>
              <td>{{ receipts_detail.region_name || '' }}</td>
            </tr>
            <tr>
              <td class="tit">生日</td>
              <td>{{ receipts_detail.birthday || '' }}</td>
              <td class="tit">出生日期</td>
              <td>{{ receipts_detail.birth || '' }}</td>
              <td class="tit">婚姻状况</td>
              <td>{{ receipts_detail.marital_name || '' }}</td>
              <td class="tit">纪念日</td>
              <td>{{ receipts_detail.commemoration || '' }}</td>
            </tr>
            <tr>
              <td class="tit">历史积分</td>
              <td>{{ receipts_detail.history_points || '' }}</td>
              <td class="tit">积分有效期</td>
              <td>{{ receipts_detail.points_valid || '' }}</td>
              <td class="tit">入会时间</td>
              <td>{{ receipts_detail.join_time || '' }}</td>
              <td class="tit">历史消费次数</td>
              <td>{{ receipts_detail.consume_times || '' }}</td>
            </tr>
            <tr>
              <td class="tit">系统消费次数</td>
              <td>{{ receipts_detail.consume_times || '' }}</td>
              <td class="tit">当前积分</td>
              <td>{{ receipts_detail.points || '' }}</td>
              <td class="tit">当前礼金</td>
              <td>{{ receipts_detail.cash || '' }}</td>
              <td class="tit">备注</td>
              <td>{{ receipts_detail.note || '' }}</td>
            </tr>
          </tbody>
        </table>
        <div v-if="checked == 3">
          <div class="flex align-center bg1">
            <div class="t t1 flex1">货品信息</div>
            <div class="t t2">数量</div>
            <div class="t t3">金额</div>
            <div class="t t4">付款情况</div>
            <div class="t t5">时间</div>
            <div class="t t6">备注</div>
          </div>
          <div>
            <div v-for="(item, index) in list3" :key="index">
              <div class="flex align-center bg2">
                <div class="margin-right-30"
                  >销售单号：{{ item.order_sn || '' }}</div
                >
                <div class="margin-right-30"
                  >会员：{{ item.nickname || '' }} {{ item.mobile }}</div
                >
                <div class="margin-right-30"
                  >收银：{{ item.make_user_name || '' }}
                </div>
                <div class="margin-right-30"
                  >主销导购：{{ item.main_salesman_name || '' }}
                </div>
                <div class="margin-right-30"
                  >销售单位：{{ item.store_name || '' }}
                </div>
              </div>
              <div>
                <table width="100%" class="bg3">
                  <tr v-for="(m, mindex) in item.item" :key="mindex">
                    <td class="t1">
                      <div class="flex align-center">
                        <a-image
                          :width="50"
                          :height="50"
                          :src="m.thumb_url ? m.thumb_url : ''"
                        />
                        <div class="flex1 margin-left-10">
                          <div class="flex align-center">
                            <span>{{ m.bar_code || '' }}</span>
                            <span class="tips">{{ m.type_name || '' }}</span>
                            <span class="tips" v-if="m.status && m.status == 4"
                              >已退还</span
                            >
                          </div>
                          <div class="margin-top-15">{{ m.name || '' }}</div>
                        </div>
                      </div>
                    </td>
                    <td class="t2">{{ m.num || '' }}</td>
                    <td class="t3">
                      <template v-if="m.type == 1"
                        >收款金额：{{ m.pay_amount || 0 }}</template
                      >
                      <template v-if="m.type == 3"
                        >抵扣金额：{{ m.discount_amount || 0 }}</template
                      >
                      <template v-if="m.type == 4"
                        >抵扣金额：{{ m.discount_amount || 0 }}</template
                      >
                      <template v-if="m.type == 5"
                        >回收金额：{{ m.discount_amount || 0 }}</template
                      >
                    </td>
                    <td
                      :rowspan="item.item.length"
                      class="t4"
                      v-if="mindex == 0"
                    >
                      {{ item.pay_type_name || '' }}</td
                    >
                    <td
                      class="t5"
                      :rowspan="item.item.length"
                      v-if="mindex == 0"
                    >
                      <div>销售时间：{{ m.sales_time || '' }}</div>
                      <div>创建时间：{{ m.create_time || '' }}</div>
                    </td>
                    <td class="t6">{{ m.note || '' }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="margin-top-15">
            <vxe-pager
              size="mini"
              :current-page="page"
              :page-size="page_size"
              :total="total"
              :layouts="[
                'Total',
                'PrevPage',
                'JumpNumber',
                'NextJump',
                'FullJump'
              ]"
              @page-change="handlePageChange"
            />
          </div>
          <div class="margin-24"
            >共消费
            <span class="ele-text-warning fs-16 fw-bolder">{{
              info3.item_count || 0
            }}</span>
            次 ，购买
            <span class="ele-text-warning fs-16 fw-bolder">{{
              info3.order_count || 0
            }}</span>
            件商品 ，共
            <span class="ele-text-warning fs-16 fw-bolder">{{
              info3.pay_amount || 0
            }}</span>
            元</div
          >
        </div>
        <div v-if="checked == 4">
          <zbTable
            v-if="query.id"
            ref="tableRef4"
            type="4"
            :memberId="query.id"
            :api-fun="refund_record"
          />
          <div class="margin-24">
            共退货
            <span class="ele-text-warning fs-16 fw-bolder">{{
              info4.order_count || 0
            }}</span>
            次 ，退货
            <span class="ele-text-warning fs-16 fw-bolder">{{
              info4.order_count || 0
            }}</span>
            件商品 ，共
            <span class="ele-text-warning fs-16 fw-bolder">{{
              info4.pay_amount || 0
            }}</span>
            元
          </div>
        </div>
        <div v-if="checked == 5">
          <zbTable
            v-if="query.id"
            ref="tableRef5"
            type="5"
            :memberId="query.id"
            :api-fun="points_record"
          />
          <div class="margin-24">
            <div>
              积分：剩余
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.now_points || 0
              }}</span>
              ，累计赠送
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.send_points || 0
              }}</span>
              (不含退货)，兑换
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.consume_points || 0
              }}</span>
              (不含取消和作废)，到期未用
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.valid_points || 0
              }}</span>
            </div>
            <div>
              礼金：剩余
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.now_cash || 0
              }}</span>
              ，累计赠送
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.send_cash || 0
              }}</span>
              (不含退货)，兑换
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.consume_cash || 0
              }}</span>
              (不含取消和作废)，到期未用
              <span class="ele-text-warning fs-16 fw-bolder">{{
                info5.valid_cash || 0
              }}</span>
            </div>
          </div>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup>
  import { ref, reactive, unref, onMounted } from 'vue';
  import { useRouter } from 'vue-router';
  import { message, Modal } from 'ant-design-vue';
  import {
    DownOutlined,
    UpOutlined,
    PlusOutlined,
    LoadingOutlined,
    ManOutlined,
    WomanOutlined
  } from '@ant-design/icons-vue';
  import { uploadFileUrl } from '@/config/setting';
  import { daochuFn } from '@/utils/daochu.js';
  import zbTable from './components/purchasePurchaseIndex.vue';
  import {
    detail,
    points_record,
    refund_record,
    consume_record
  } from '@/api/member/get_list';

  const { currentRoute, push } = useRouter();
  const { query } = unref(currentRoute);
  console.log(query);
  const loading = ref(false);
  const receipts_detail = ref({});
  const checked = ref('1');
  const parmas = ref(null);

  const total = ref(0);
  const page = ref(1);
  const page_size = ref(10);
  const list3 = ref([]);
  const info3 = ref({});
  const info4 = ref({});
  const info5 = ref({});

  onMounted(() => {
    parmas.value = {
      member_id: query.id
    };
    detail({
      id: query.id
    }).then((res) => {
      receipts_detail.value = res;
    });

    refund_record({
      member_id: query.id,
      page: 1
    }).then((res) => {
      info4.value = res.data;
    });
    points_record({
      member_id: query.id,
      page: 1
    }).then((res) => {
      console.log('info5==', res);
      info5.value = res.data;
    });
  });

  const handlePageChange = ({ currentPage, pageSize }) => {
    page.value = currentPage;
    getList();
  };
  const toggleChange = (e) => {
    checked.value = e.target.value;
    page.value = 1;
    if (checked.value == 3) {
      getList();
    }
  };
  const getList = () => {
    consume_record({
      member_id: query.id,
      page: page.value,
      page_size: page_size.value
    }).then((res) => {
      console.log(res.data.list.data);
      total.value = res.data.list.total;
      list3.value = res.data.list.data;
      info3.value = res.data;
    });
  };
</script>

<style lang="less" scoped>
  .bg1 {
    background-color: #e5e5e5;
    padding: 8px;
  }

  .bg2 {
    background-color: #f5f5f5;
    padding: 8px;
  }

  .t2,
  .t3,
  .t4,
  .t6,
  .t7 {
    text-align: center;
    width: 115px;
  }

  .t5 {
    text-align: center;
    width: 200px;
  }

  .bg3 .t1,
  .bg3 .t2,
  .bg3 .t3,
  .bg3 .t4,
  .bg3 .t5,
  .bg3 .t6,
  .bg3 .t7 {
    border-right: 2px solid #f5f5f5;
    padding: 20px 0;
  }

  .tips {
    font-size: 10px;
    background-color: #e5e5e5;
    padding: 0px 10px;
    margin-left: 10px;
  }
</style>
